import type { ExtractPropTypes, PropType } from 'vue'

// 按钮类型
export type ButtonType = 'primary' | 'default' | 'dashed' | 'text' | 'link'

// 按钮尺寸
export type ButtonSize = 'small' | 'default' | 'large'

// 按钮形状
export type ButtonShape = 'default' | 'circle' | 'round'

// 按钮HTML类型
export type ButtonHtmlType = 'button' | 'submit' | 'reset'

// 按钮Props定义
export const buttonProps = {
  // 按钮类型
  type: {
    type: String as PropType<ButtonType>,
    default: 'default'
  },
  // 按钮尺寸
  size: {
    type: String as PropType<ButtonSize>,
    default: 'default'
  },
  // 按钮形状
  shape: {
    type: String as PropType<ButtonShape>,
    default: 'default'
  },
  // HTML类型
  htmlType: {
    type: String as PropType<ButtonHtmlType>,
    default: 'button'
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否加载中
  loading: {
    type: Boolean,
    default: false
  },
  // 是否危险按钮
  danger: {
    type: Boolean,
    default: false
  },
  // 是否块级按钮
  block: {
    type: Boolean,
    default: false
  },
  // 是否幽灵按钮
  ghost: {
    type: Boolean,
    default: false
  },
  // 图标
  icon: {
    type: String,
    default: ''
  },
  // 加载图标
  loadingIcon: {
    type: String,
    default: ''
  },
  // 图标位置
  iconPosition: {
    type: String as PropType<'left' | 'right'>,
    default: 'left'
  }
} as const

// 按钮Props类型
export type ButtonProps = ExtractPropTypes<typeof buttonProps>

// 按钮事件
export interface ButtonEmits {
  click: [event: MouseEvent]
}
